{% extends 'base.html' %}
{% load static %}

{% block title %}卡牌游戏 - 主页{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <!-- 游戏标题 -->
            <div class="text-center mb-5">
                <h1 class="display-4 text-primary">
                    <i class="fas fa-gamepad"></i> 卡牌游戏
                </h1>
                <p class="lead">收集卡牌，构建卡组，与玩家对战！</p>
            </div>

            <!-- 游戏介绍 -->
            <div class="row mb-5">
                <div class="col-md-4 mb-3">
                    <div class="card h-100 text-center">
                        <div class="card-body">
                            <i class="fas fa-gem fa-3x text-warning mb-3"></i>
                            <h5 class="card-title">收集卡牌</h5>
                            <p class="card-text">收集不同稀有度的卡牌，每张卡牌都有独特的攻击力。</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 mb-3">
                    <div class="card h-100 text-center">
                        <div class="card-body">
                            <i class="fas fa-layer-group fa-3x text-info mb-3"></i>
                            <h5 class="card-title">构建卡组</h5>
                            <p class="card-text">从你的收藏中选择5张卡牌构建强大的卡组。</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 mb-3">
                    <div class="card h-100 text-center">
                        <div class="card-body">
                            <i class="fas fa-swords fa-3x text-danger mb-3"></i>
                            <h5 class="card-title">对战竞技</h5>
                            <p class="card-text">与其他玩家进行回合制对战，展示你的策略技巧。</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 游戏功能按钮 -->
            <div class="row justify-content-center">
                <div class="col-md-6">
                    {% if user.is_authenticated %}
                        <div class="d-grid gap-3">
                            <a href="{% url 'game-lobby' %}" class="btn btn-primary btn-lg">
                                <i class="fas fa-play"></i> 进入游戏大厅
                            </a>
                            <a href="{% url 'card-collection' %}" class="btn btn-outline-primary btn-lg">
                                <i class="fas fa-gem"></i> 我的卡牌收藏
                            </a>
                            <a href="{% url 'deck-builder' %}" class="btn btn-outline-primary btn-lg">
                                <i class="fas fa-layer-group"></i> 卡组构建器
                            </a>
                        </div>
                    {% else %}
                        <div class="text-center">
                            <h4>请先登录以开始游戏</h4>
                            <div class="d-grid gap-2 d-md-block">
                                <button class="btn btn-primary btn-lg" onclick="showLoginModal()">
                                    <i class="fas fa-sign-in-alt"></i> 登录
                                </button>
                                <button class="btn btn-outline-primary btn-lg" onclick="showRegisterModal()">
                                    <i class="fas fa-user-plus"></i> 注册
                                </button>
                            </div>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 登录模态框 -->
<div class="modal fade" id="loginModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">登录</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="loginForm">
                    <div class="mb-3">
                        <label for="loginUsername" class="form-label">用户名</label>
                        <input type="text" class="form-control" id="loginUsername" required>
                    </div>
                    <div class="mb-3">
                        <label for="loginPassword" class="form-label">密码</label>
                        <input type="password" class="form-control" id="loginPassword" required>
                    </div>
                    <button type="submit" class="btn btn-primary w-100">登录</button>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- 注册模态框 -->
<div class="modal fade" id="registerModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">注册</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="registerForm">
                    <div class="mb-3">
                        <label for="registerUsername" class="form-label">用户名</label>
                        <input type="text" class="form-control" id="registerUsername" required>
                    </div>
                    <div class="mb-3">
                        <label for="registerEmail" class="form-label">邮箱</label>
                        <input type="email" class="form-control" id="registerEmail" required>
                    </div>
                    <div class="mb-3">
                        <label for="registerNickname" class="form-label">昵称</label>
                        <input type="text" class="form-control" id="registerNickname" required>
                    </div>
                    <div class="mb-3">
                        <label for="registerPassword" class="form-label">密码</label>
                        <input type="password" class="form-control" id="registerPassword" required>
                    </div>
                    <div class="mb-3">
                        <label for="registerPasswordConfirm" class="form-label">确认密码</label>
                        <input type="password" class="form-control" id="registerPasswordConfirm" required>
                    </div>
                    <button type="submit" class="btn btn-primary w-100">注册</button>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
function showLoginModal() {
    new bootstrap.Modal(document.getElementById('loginModal')).show();
}

function showRegisterModal() {
    new bootstrap.Modal(document.getElementById('registerModal')).show();
}

// 登录表单处理
document.getElementById('loginForm').addEventListener('submit', async function(e) {
    e.preventDefault();
    
    const username = document.getElementById('loginUsername').value;
    const password = document.getElementById('loginPassword').value;
    
    try {
        const response = await fetch('/api/auth/login/', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRFToken': getCookie('csrftoken')
            },
            body: JSON.stringify({ username, password })
        });
        
        if (response.ok) {
            const data = await response.json();
            showMessage('登录成功！', 'success');
            bootstrap.Modal.getInstance(document.getElementById('loginModal')).hide();
            setTimeout(() => location.reload(), 1000);
        } else {
            const error = await response.json();
            showMessage('登录失败：' + (error.error || '用户名或密码错误'), 'error');
        }
    } catch (error) {
        showMessage('登录失败：网络错误', 'error');
    }
});

// 注册表单处理
document.getElementById('registerForm').addEventListener('submit', async function(e) {
    e.preventDefault();
    
    const username = document.getElementById('registerUsername').value;
    const email = document.getElementById('registerEmail').value;
    const nickname = document.getElementById('registerNickname').value;
    const password = document.getElementById('registerPassword').value;
    const passwordConfirm = document.getElementById('registerPasswordConfirm').value;
    
    if (password !== passwordConfirm) {
        showMessage('密码不匹配', 'error');
        return;
    }
    
    try {
        const response = await fetch('/api/auth/register/', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRFToken': getCookie('csrftoken')
            },
            body: JSON.stringify({ username, email, nickname, password, password_confirm: passwordConfirm })
        });
        
        if (response.ok) {
            const data = await response.json();
            showMessage('注册成功！', 'success');
            bootstrap.Modal.getInstance(document.getElementById('registerModal')).hide();
            setTimeout(() => location.reload(), 1000);
        } else {
            const error = await response.json();
            showMessage('注册失败：' + (error.error || '注册失败'), 'error');
        }
    } catch (error) {
        showMessage('注册失败：网络错误', 'error');
    }
});
</script>
{% endblock %}
